<template>
  <div>
    <Tooltip>
      <template #title v-if="inputValue">
        <span class="numeric-input-title">
          {{ formatValue }}
        </span>
      </template>
      <Input v-model:value="inputValue" v-bind="$attrs" />
    </Tooltip>
  </div>
</template>
<script lang="ts" setup name="ToolbarInput">
  import { Tooltip, Input } from 'ant-design-vue';

  import { computed } from 'vue';

  const emit = defineEmits(['update:data']);
  const props = defineProps({
    data: String,
  });
  const inputValue = computed({
    get() {
      return props.data;
    },
    set(v) {
      emit('update:data', v);
    },
  });
  function formatNumber(value) {
    value += '';
    const list = value.split('.');
    const prefix = list[0].charAt(0) === '-' ? '-' : '';
    let num = prefix ? list[0].slice(1) : list[0];
    let result = '';

    while (num.length > 3) {
      result = `,${num.slice(-3)}${result}`;
      num = num.slice(0, num.length - 3);
    }

    if (num) {
      result = num + result;
    }

    return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
  }
  const formatValue = computed(() => {
    if (inputValue.value === '-') return '-';
    return formatNumber(inputValue.value);
  });
</script>
<style lang="less" scoped></style>
